<!DOCTYPE html>
<html>
<head>
    <title>Preload Images example</title>

    <script src="./assets/easeljs-NEXT.min.js"></script>
    <script src="./assets/tweenjs-NEXT.min.js"></script>

    <script type="text/javascript" src="/js/preloadjs/AbstractLoader.js"></script>
    <script type="text/javascript" src="/js/preloadjs/PreloadJS.js"></script>
    <script type="text/javascript" src="/js/preloadjs/TagLoader.js"></script>
    <script type="text/javascript" src="/js/preloadjs/XHRLoader.js"></script>
    <script type="text/javascript" src="/js/preloadjs/preload.js"></script>
    
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">

        var loaderBar;
        var stage;
        var loaderStage;
        var bar;
        var lc;
        var offset;
        var imageContainer;
        var currentImage;
        var update;
        var borderPadding;
        var loaderWidth;
        var loaderColor;
        var totalLoaded;
        var preload;

        function init() {
        	if (window.top != window) {
        		document.getElementById("header").style.display = "none";
        	}

			manifest = [
				{src:"./assets/image0.jpg", id:"image0"},
				{src:"./assets/image1.jpg", id:"image1"},
				{src:"./assets/image2.jpg", id:"image2"},
				{src:"./assets/image3.jpg", id:"image3"}
			];

            canvas = document.getElementById('myCanvas');
            lc = document.getElementById('loaderCanvas');
            update = false;
            stage = new createjs.Stage(canvas);
            loaderStage = new createjs.Stage(lc);
            totalLoaded = 0;
            borderPadding = 10;

            var barHeight = 20;
            loaderColor = createjs.Graphics.getRGB(0,0,0)
            loaderBar = new createjs.Container();

            bar = new createjs.Shape();
            bar.graphics.beginFill(loaderColor);
            bar.graphics.drawRect(0, 0, 1, barHeight);
            bar.graphics.endFill();

            imageContainer = new createjs.Container();
            imageContainer.x = 430;
            imageContainer.y = 200;
            loaderWidth = 800;
            stage.addChild(imageContainer);

            var bgBar = new createjs.Shape();
            var padding = 3
            bgBar.graphics.setStrokeStyle(1);
            bgBar.graphics.beginStroke(loaderColor);
            bgBar.graphics.drawRect(-padding/2, -padding/2, loaderWidth, barHeight+padding);

            loaderBar.addChild(bgBar);
            loaderBar.addChild(bar);
            loaderBar.x = loaderBar.y = 10;

            loaderStage.addChild(loaderBar);

            preload = new createjs.PreloadJS();
            preload.onProgress = handleProgress;
            preload.onComplete = handleComplete;
            preload.onFileLoad = handleFileLoad;
            preload.loadManifest(manifest);

            loaderStage.update();
            stage.update();
	        createjs.Ticker.setFPS(30);
	        createjs.Ticker.addListener(window);
        }

        function stop() {
	        createjs.Ticker.removeListener(window);
	        if (preload != null) { preload.close(); }
        }

        function handleProgress(event) {
            bar.scaleX = (event*100)*(loaderWidth/100);
            loaderStage.update();
            if (bar.scaleX >= (100*(loaderWidth/100))) {
                loaderBar.visible = false;
                loaderStage.update();
            }
        }

        function handleFileLoad(event) {
            var img = new Image();
            img.src = event.src;
            img.onload = handleLoadComplete;
        }

        function handleLoadComplete(event) {

            var movieClip = new createjs.Container();
            var bmp = new createjs.Bitmap(this);
            var _w = this.width;
            var _h = this.height;

            bmp.scaleX = bmp.scaleY = .75;
            bmp.regX = _w/2;
            bmp.regY = _h/2;
            bmp.onPress = handlePress;
            bmp.rotation = Math.random() * 16 - 8;

            var border = new createjs.Shape();
            border.graphics.beginFill(createjs.Graphics.getRGB(255,255,255));
            border.graphics.drawRect(0, 0, _w+borderPadding, _h+borderPadding);
            border.graphics.endFill();
            border.rotation = bmp.rotation;
            border.regX = _w/2;
            border.regY = _h/2;
            bmp.x = bmp.y = (borderPadding/2) * bmp.scaleX;

            border.scaleX = border.scaleY =  bmp.scaleX;

            border.shadow = new createjs.Shadow('#000000', 0, 0, 2.5);

            movieClip.addChild(border);
            movieClip.addChild(bmp);

            imageContainer.addChild(movieClip);
            update = true;
            totalLoaded += 1;

            if (totalLoaded == manifest.length) {
                update = false;
                stage.update();
            }
        }

        function tweenComplete1() {

        }

        function handlePress(event) {
            currentItem = event.target.parent;
            update = true;
            var tween = createjs.Tween.get(currentItem).to({y:-350}, 200).call(tweenComplete);
        }

        function tweenComplete() {
            imageContainer.addChildAt(currentItem, 0);
            var tween = createjs.Tween.get(currentItem).to({y:0}, 500).call(tweenComplete2);

        }

        function tweenComplete2() {

            stage.update();
            update = false;
        }

        function handleMove(event) {
            currentItem.x = event.stageX+offset.x;
            currentItem.y = event.stageY+offset.y;
            stage.update();
        }

        function handleComplete(event) {
            //console.log('handleComplete', event, totalLoaded);


        }

        function tick() {
            if (update) {
                stage.update();
            }
        }

    </script>
	<link rel="stylesheet" href="./assets/demoStyles.css" />
</head>
<body onload="init()">

	<header id="header" class="PreloadJS">
	    <h1><span class="text-product">Preload<strong>JS</strong></span> Image Gallery</h1>
	    <p>This sample loads a number of images, and adds them to a canvas stage when they are complete. Click the image to view the next one.</p>
	</header>

    <canvas id="myCanvas" width="960" height="400"></canvas><br/>
</body>
</html>
